// import React from 'react'
import '@/assets/css/UserIndex.less';
import Footer from '@/components/common/footer';
import React, { useEffect } from 'react';
import Cookie from 'react-cookies';
import { NavLink, useNavigate } from 'react-router-dom';
import { Dialog, Notify } from 'react-vant';

const Index = () => {
    useEffect(() => {
    }, [])
    let navigate = useNavigate()
    const OnLogin = () => {
        if (Object.keys(React.$LoginUser).length === 0 && JSON.stringify(React.$LoginUser) === "{}") {
            return (<NavLink to="/user/base/login" className="login wow fadeInUp" data-wow-delay="200ms">登录</NavLink>)
        }
    }
    const onLogout = () => {
        Dialog.confirm({
            title: '是否退出当前账号？',
        }).then(() => {
            Notify.show({
                type: 'success',
                message: '退出成功',
                onClose: () => {
                    Cookie.remove('LoginUser')
                    React.$LoginUser = {}
                    navigate('/user/base/index')
                }
            })
        }).catch((err) => {
            console.log(err);
        })
    }
    const Logout = () => {
        if (React.$LoginUser && JSON.stringify(React.$LoginUser) !== '{}') {
            return (
                <>
                    <div className="item" onClick={onLogout} >
                        <span>退出账号</span>
                        <img src='/assets/images/row.png' alt='' />
                    </div>
                </>
            )
        }
    }
    return (
        <>
            {/* 用户信息  */}
            <div className="user">
                <div className="avatar wow fadeInUp">
                    <img src={JSON.stringify(React.$LoginUser) !== "{}" ? React.$LoginUser.avatar : "../../assets/images/avatar.png"} alt="" />
                </div>
                <div className="nickname wow fadeInUp" data-wow-delay="100ms" >
                    {JSON.stringify(React.$LoginUser) !== "{}" ? React.$LoginUser.nickname : "FunkyRicky"}
                </div>

                <OnLogin />
            </div>
            {/* 菜单  */}
            <div className="menulist wow fadeInUp" data-wow-delay="300ms">
                <NavLink to="/user/base/profile" className="item">
                    <span>基本资料</span>
                    <img src='../../assets/images/row.png' alt="" />
                </NavLink>
                <NavLink to="/user/base/card" className="item">
                    <span>生成名片</span>
                    <img src='../../assets/images/row.png' alt="" />
                </NavLink>
                <Logout />
            </div>
            <Footer />
        </>
    )
}
export default Index